<template>
  <div v-if="detail" class="application-list-header">
    <router-link to="/" class="flex items-center">
      <icon name="el-icon-Back" color='#000' :size="20" />
      <span class="flex-1 t">返回</span>
    </router-link>
    <div class="flex items-center cursor-pointer more" @click="menuShowFun">
      <span class="name">{{detail.name}}</span>
      <img src="@/assets/images/open-yy.svg" class="open-yy" alt="">
      <div class="application-list-le w-[220px] mr-5" :class="{on : show}">
        <div class="scroll-box">
          <el-scrollbar height="100%" ref="scrollbarRef">
            <dl class="scroll-list">
              <dd v-for="(items, index) in screenList" :class="{open : items.open}">
                <div class="tit" @click="items.open = !items.open">{{items.name}} <icon name="el-icon-ArrowDown" /></div>
                <div class="open-box" :style="{height: items.open ? screenList[index].list.length*92+'px' : '0px'}">
                  <div v-for="(item, idx) in screenList[index].list" class="item cursor-pointer" :class="{on : id === item.id}" :id="`scrollItem${item.id}${item.parent_id}`" @click="getAIDetail(item)">
                    <div class="icon" :style="{background: colors[idx].bg, color: colors[idx].text}">{{item.name.substr(0,1)}}</div>
                    <div class="div flex-1">
                      <div class="name mb-1 text-line1">{{item.name}}</div>
                      <div class="intro text-line1">{{item.intro}}</div>
                    </div>
                    
                  </div>
                </div>
              </dd>
            </dl>
          </el-scrollbar>
        </div>
      </div>
      
    </div>
  </div>
  
</template>
<script lang="ts" setup>
  import { categoryApi } from '@/api/app';
  import { nextTick, onMounted, ref, shallowRef } from 'vue';
  import { useRoute } from 'vue-router';
  import { colors } from '@/utils/util';
  defineProps({
    show:{
      type:Boolean,
      default: false,
    },
    detail:{
      type:Object,
      default:(()=>{return null})
    }
  })
  const menuShow = ref(false);
  const menuShowFun = () => {
    menuShow.value = !menuShow.value
  }
  const route = useRoute();
  const id = ref(route.query.id ? Number(route.query.id) : 0);
  const pid = ref(route.query.pid ? Number(route.query.pid) : 0);
  const idname = ref(`${id.value}${pid.value}`)
  console.log('id', route.query)
  // 筛选栏数据
  const screenList = ref<{id:number, name:string, open:boolean, list:any}[]>([])
  const getCon = () => {
    categoryApi({search:''}).then(res=>{
      screenList.value = res.data.map((m:any) => {m.open = m.id === pid.value ? true : false; return m})
      scrollToElement();
    })
  }
  
  
  
  
  // 选择产品
  const emits = defineEmits(['chooseAI'])
  const getAIDetail = (item:any) => {
    pid.value = item.parent_id;
    id.value = item.id;
    emits('chooseAI', item.id, item.parent_id)
  }
  
  // 刚进页面滚动条执行
  const scrollbarRef = shallowRef();
  const scrollToElement = () => {
    const targetId = `scrollItem${idname.value}`; // 动态指定的目标元素 ID
    nextTick(() => {
      const targetElement = document.getElementById(targetId);
      if (targetElement && scrollbarRef.value) {
        const scrollTop = targetElement.offsetTop;
        console.log('scrollTop--', scrollTop)
        scrollbarRef.value.setScrollTop(scrollTop-20); // 使用 el-scrollbar 的 setScrollTop 方法
      } else {
        console.error('目标元素未找到或滚动容器未初始化');
      }
    });
  };
  
  // 页面加载时滚动到某个位置（可选）
  getCon()
  onMounted(async () => {
    await nextTick()
    
  });
  
  defineExpose({
    
  })

</script>
<style lang="scss" scoped>
.open-yy{width: 20px; transition: all ease 0.2s; transform: rotate(-90deg);}
$headerH:56px;
$hvH: calc(var(--vh, 1vh) * 100);
$topH:calc($hvH - 60px);
.application-list-header{
    height: $headerH; display: flex; align-items: center; justify-content: space-between; width: 100%; font-size:18px;
    .t{margin-left: 4px;}
    .name{margin-right: 10px;}
    .more{
      height: 100%;
      &:hover{
        .open-yy{transform: rotate(0deg);}
        :deep(.application-list-le){
          max-height: calc($hvH - 100px); overflow: visible; top:calc( $headerH - 10px)
        }
      }
    }
  }
.application-list-le{
  margin-right: 20px; transition:all ease .2s; position: absolute; top:60px; max-height: 0; overflow: hidden; right: -49px; z-index:980; padding: 1px; width: 220px;
  .scroll-box{
    height:100%; position: relative; margin-top: 10px;  box-shadow: 0 0 10px #ededed;border-radius: 10px;  z-index:980; background-color: #fff;
    &::before{content: ''; display: block; width: 0px; height: 0px; border: 11px solid transparent; border-bottom-color: #ededed; position:absolute; bottom: 100%; right:40px; margin: 0 -1px ;}
    &::after{content: ''; display: block; width: 0px; height: 0px; border: 10px solid transparent; border-bottom-color: #fff; position:absolute;bottom: 100%; right:40px;}
  }
}
:deep(.el-scrollbar){padding: 14px;}
.scroll-list{
   max-height: calc($hvH - 200px);
  .tit{display: flex; align-items: center; justify-content: space-between; cursor: pointer; height: 30px; margin-bottom: 12px; font-size: 14px;}
  .item{
    padding:16px; background-color:#F7F7F7; margin-bottom:18px; border-radius: 12px; height:74px; display:flex; align-items:center; position: relative; overflow: hidden;transition: all ease .3s;
    &:hover,&.on{
      background-color: var(--el-color-primary);
      .name,.intro{color: var(--color-btn-text);}
      .icon{background-color: var(--color-btn-text);}
    }
  }
  .open{
    :deep(.el-icon){transition: all ease .3s; transform: rotate(180deg);}
  }
  .name{font-size:16px; line-height: 1; margin-bottom: 6px; color:var(--el-color-primary);}
  .intro{line-height:1.6; line-height: 1; font-size:12px; color:var(--el-color-info);}
  .icon{width:40px; height:40px; border-radius: 10px; background-color:var(--el-color-primary-light-9); display:flex; align-items:center; justify-content:center; font-size:15px;  color:var(--el-color-primary); margin-right:10px; font-weight:bold}
  .open-box{overflow: hidden; transition: all ease .3s;}
}
.open-left{display:none; position:fixed; right:0; top:90px; z-index:100}
.open-bg{
  display:none; position:fixed; left:0; top:60px; z-index:90; width:100%; background-color:rgba(0,0,0,0.5); height:$topH; opacity: 0;
  animation-name: fadeIn; /* 指定动画名称 */
  animation-duration: 0.1s; /* 动画持续时间 */
  animation-delay: 0.05s; /* 动画延迟时间 */
  animation-fill-mode: forwards; /* 动画结束后保持最后一帧状态 */
}
@media only screen and (max-width: 992px){
  // .application-list-le{
  //   position:fixed; transform: translateX(-120%); left:0; top:74px; z-index:95; margin-right:0; height:$topH;
  //   &.on{transform: translateX(14px);}
  // }
  .open-left{display:block;}
  .open-bg.on{display:block;}
}
@media only screen and (max-width: 540px){
  .application-list-header{display: none;}
  .application-list-le{ width:100%}
}
@keyframes fadeIn {
  from {
    opacity: 0; /* 动画开始时透明度为 0 */
  }
  to {
    opacity: 1; /* 动画结束时透明度为 1 */
  }
}
</style>